<!-- 用于地图中弹出面板的边框样式 --><!--这个相同的注释有很多，这个有注释有问题-->
<template>
  <transition name="fade">
    <!-- 外层div控制面板显隐 -->
    <div class="main_top map_main_top" :class="{panelViewRight:(place=='right'),panelViewLeft:(place=='left'),border:(isLucency!=true)}" >
      <!-- 关闭按钮 -->
      <div v-show="closer"><a href="#" id="popup-closer" class="ol-popup-closer" @click="closer()"></a></div>
      <div id="popup-content" style="display:inline;">
        <!-- 显示内容使用插槽 -->
        <slot/>
      </div>
    </div>
  </transition >
</template>

<script>
export default {
  name: 'PopupBorder',
  created: function () {
  },
  data () {
    return {
      tableData: [],
      localIsShow: true
    }
  },
  methods: {
  },
  // 组建接受的传入参数
  props: [
    // 位置
    'place',
    // 宽度
    'width',
    // 关闭回调函数
    'closer',
    // 是否透明
    'isLucency'

  ]
}
</script>
<style scoped>
@import "./../../assets/css/ol.css";
.panelViewRight {
  float: right;
  margin-top: 10px;
  margin-right: 24px;
}
.panelViewLeft {
  float: left;

}
.inline {
  display: inline;
}
.map_main_top{
    position: relative;
    z-index: 2;
    padding: 10px 10px 10px 10px;
}
.border{

  background:#09193d;
  box-shadow: 0px 1px 2px #999999;
  border-radius: 4px;
  background-image: url(../../assets/img/beijingtu.jpg);
  background-position-x: -170px;
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(0% 8%,  8% 0%,  100% 0%,  100% 5%,  100% 100%,  95% 100%, 8% 100%,  0 92%  );
  clip-path: polygon(0% 8%,  8% 0%,  100% 0%,  100% 5%,  100% 100%,  95% 100%, 8% 100%,  0 92%  );

}

</style>
